<template>
  <footer class="footer_guide">
     <ul class="footer">
       <li :class="{active : '/home' === $route.path}" @click="goTo('/home')">
         <span class="sp1 iconfont icon-U"></span>
         <span class="sp2">外卖</span>
       </li>
       <li :class="{active : '/search' === $route.path}" @click="goTo('/search')">
         <span class="sp1 iconfont icon-xingtaiduICON_sousuo--"></span>
         <span class="sp2">搜索</span>
       </li>
       <li :class="{active : '/order' === $route.path}" @click="goTo('/order')">
         <span class="sp1 iconfont icon-waimaidingdan2" ></span>
         <span class="sp2">订单</span>
       </li>
       <li :class="{active : '/personal' === $route.path}" @click="goTo('/personal')">
         <span class="sp1 iconfont icon-gerenkuang" ></span>
         <span class="sp2">我的</span>
       </li>
     </ul>
  </footer>
</template>

<script>
export default {
  name: 'FooterGuide',
  methods: {
    goTo (path) {
      this.$router.replace(path)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .footer
    position fixed
    bottom 0
    left:0
    z-index 100
    width 100%
    display flex
    padding 7px 0
    background white
    border-top 1px solid #ECECEC
  li
    flex 1
    text-align center
    color #989898
    &.active
      color #02a774
    .sp1
      font-size 48px
      display block
      margin-bottom 6px
    .sp2
     font-size 25px
</style>
